<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
  <head>
    
    <title>My JSP 'success.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/reset.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/style1.css" media="screen" type="text/css" />
	
  </head>
  
  <body>
  <!-- 播放器 -->
                <!-- Breadcrumb -->
                <ol class="breadcrumb hidden-xs">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Library</a></li>
                    <li class="active">Data</li>
                </ol>
                
                <h4 class="page-title">CHARTS</h4>
                
                <!-- Deafult Table -->
                <div class="block-area" id="defaultStyle">
                    <h3 class="block-title">音乐信息</h3>
 
                    
                    <table class="table tile">
                        <thead>
								<tr>
									<th>编号</th>
									<th>音乐名</th>
									<th>歌手</th>
									<th>操作</th>
								</tr>
							</thead>
                        <tbody>
                        <c:forEach items="${list }" var="m">
                            <tr>
                                <td>${m.id}</td>
                                <td>${m.musicName}</td>
                                <td>${m.singer}</td>
                                <td>
	                                <a href="${pageContext.request.contextPath}/music/tomusicupdate?id=${m.id}" >修改</a>
									<%-- <a href="javascript:if(confirm('您确定要删除?')){window.location='${pageContext.request.contextPath}/music/musicdel?id=${m.id}&currentPage=${requestScope.page.currentPage}'}">
									 删除</a> --%>
							      <a data-toggle="modal" href="#modalNarrower">删除</a>
							      
							     <!--  <a href="javascript: $('#jquery_jplayer').jPlayer("setMedia", { mp3: "${m.urlmusic}"}).jPlayer("play"); ">bofang </a> -->
							     <a href="javascript: $('#jquery_jplayer').jPlayer("setMedia", { mp3: "${m.urlmusic}"}).jPlayer("play"); ">bofang </a>
							   </td>
                            </tr>
                            
                <!-- Modal Narrower -->	
                    <div class="modal fade" id="modalNarrower" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title">提示</h4>
                                </div>
                                <div class="modal-body">
                                    <p>是否删除.</p>
                                </div>
                                <div class="modal-footer">
                                    <a type="button" class="btn btn-sm"  href="${pageContext.request.contextPath}/music/musicdel?id=${m.id}">删除</a>
                                    <button type="button" class="btn btn-sm" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
               
                  </c:forEach>
                        </tbody>
                    </table>
                </div>
                  <h3 class="block-title">播放器</h3>
                    
							<div class="music-player">
							  <div style="background-image: url(images/yqB0erk.jpg);" class="album"></div>
							  <div class="info">
							    <div class="left">
							      <a href="javascript:;" class="icon-shuffle"></a>
							      <a href="javascript:;" class="icon-heart"></a>
							    </div>
							    <div class="center">
							    <div class="jp-playlist">
							      <ul>
							        <li></li>
							      </ul>
							    </div>
							    </div>
							    <div class="right">
							      <a href="javascript:;" class="icon-repeat"></a>
							      <a href="javascript:;" class="icon-share"></a>
							    </div>
							
							    <div class="progress jp-seek-bar">
							      <span class="jp-play-bar" style="width: 0%"></span>
							    </div>
							  </div>
							
							  <div class="controls">
							    <div class="current jp-current-time">00:00</div>
							    <div class="play-controls">
							      <a href="javascript:;" class="icon-previous jp-previous" title="previous"></a>
							      <a href="javascript:;" class="icon-play jp-play" title="play"></a>
							      <a href="javascript:;" class="icon-pause jp-pause" title="pause"></a>
							      <a href="javascript:;" class="icon-next jp-next" title="next"></a>
							    </div>
							    <div class="volume-level jp-volume-bar">
							      <span class="jp-volume-bar-value" style="width: 0%"></span>
							      <a href="javascript:;" class="icon-volume-up jp-volume-max" title="max volume"></a>
							      <a href="javascript:;" class="icon-volume-down jp-mute" title="mute"></a>
							    </div>
							  </div>
							  <div id="jquery_jplayer" class="jp-jplayer"></div>
							</div>
							
					<script src="${pageContext.request.contextPath}/admin/js/jquery-1.8.3.min.js"></script>
					<script src='${pageContext.request.contextPath}/admin/js/jquery.jplayer.min.js'></script>
					<script src='${pageContext.request.contextPath}/admin/js/jplayer.playlist.min.js'></script>
					<%-- <script src="${pageContext.request.contextPath}/admin/js/index.js"></script> --%>
  </body>
<script type="text/javascript">
  $(function(){
          var playlist = [
          <c:forEach items="${list }" var="m">
          {
         title:"${m.musicName}",
         artist:"${m.singer}",
         mp3:"${pageContext.request.contextPath}/${m.urlmusic}"
         },</c:forEach>
         ];
   
  var cssSelector = {
    jPlayer: "#jquery_jplayer",
    cssSelectorAncestor:".music-player"
  };
  
  var options = {
    swfPath: "${pageContext.request.contextPath}/admin/js/Jplayer1.swf",
	solution: 'html, flash',
    supplied: "ogv, m4v, oga, mp3"
  };
  
  var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
  
}); 
/* $(document).ready(function(){
  $("#jquery_jplayer").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", 
       <c:forEach items="${list }" var="m">
      {
         mp3: "${m.urlmusic}"
      }
     </c:forEach>
      );
    },
   swfPath: "jPlayer",
   supplied: "mp3, m4a, oga"
  });
 }); */
 </script>
</html>
